<template>
    <div>
        <el-row>
            <el-col :span="24">
                <!-- 放搜索条件 -->
                <el-form :inline="true" size="small">

                    <el-form-item label="患者姓名">
                        <el-input placeholder="请输入患者姓名" clearable="" v-model="dischargeForm.name"></el-input>
                    </el-form-item>

                    <el-form-item label="科室">
                        <el-select v-model="dischargeForm.deId" @change="updateDocList" clearable="">
                            <el-option v-for="department in deList" :key="department.id" :label="department.deName"
                                :value="department.id">
                            </el-option>
                        </el-select>

                        <el-select v-model="dischargeForm.docId" clearable="">
                            <el-option v-for="doc in docList" :key="doc.id" :label="doc.docName"
                                :value="doc.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="状态">
                        <el-select v-model="dischargeForm.oaStatus" clearable="">
                            <el-option v-for="status in statusList" :key="status.id" :label="status.name"
                                :value="status.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="开始日期">
                        <el-date-picker v-model="dischargeForm.beginDate" value-format="yyyy-MM-dd" type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束日期">
                        <el-date-picker v-model="dischargeForm.endDate" value-format="yyyy-MM-dd" type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="queryList">查询</el-button>
                    </el-form-item>
                    <el-switch v-model="value1" active-text="自己科室" inactive-text="非自己科室" @change="handleSwitchChange"
                        active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-form>



            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 表格 -->
                <el-table :data="filteredTableData" style="width: 100%" border :row-style="{ height: '10px' }">
                    <el-table-column prop="hzId" label="住院表编号" v-if="false"></el-table-column>
                    <el-table-column prop="id" label="编号"></el-table-column>
                    <el-table-column prop="name" label="病人姓名"></el-table-column>
                    <el-table-column prop="deName" label="科室"></el-table-column>
                    <el-table-column prop="docName" label="医生"></el-table-column>
                    <el-table-column prop="oaDate" label="日期"></el-table-column>
                    <el-table-column prop="oaStatus" label="状态">
                        <template slot-scope="scope">
                            <el-tag
                                :type="scope.row.oaStatus == '0' ? 'danger' : (scope.row.oaStatus == '1' ? 'primary' : 'success')"
                                disable-transitions>
                                {{ scope.row.oaStatus == '0' ? '未缴费' : (scope.row.oaStatus == '1' ? '已缴费' : '已完成') }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark">
                                <el-button :type="scope.row.oaStatus !== '0' ? 'primary' : 'warning'"
                                    :icon="scope.row.oaStatus !== '0' ? 'el-icon-star-off' : 'el-icon-position'"
                                    :disabled="scope.row.oaStatus == '0' || scope.row.oaStatus == '2'" size="small"
                                    @click="scope.row.oaStatus !== '0' ? updateHzdate(scope.row) : null">
                                    办理出院
                                </el-button>
                                <span slot="content">
                                    {{ scope.row.oaStatus !== '0' ? '办理中' : '请先缴费' }}
                                </span>
                            </el-tooltip>
                        </template>
                        <!-- <template slot-scope="scope">
                            <el-button v-if="scope.row.oaStatus !== '0'" type="primary" icon="el-icon-star-off"
                                @click="updateHzdate(scope.row)" size="small">
                                办理出院
                            </el-button>
                            <el-tooltip v-else effect="dark">
                                <el-button type="warning" icon="el-icon-position" :disabled="scope.row.oaStatus == '0' || scope.row.oaStatus == '2'" size="small">
                                    办理出院
                                </el-button>
                            </el-tooltip>
                        </template> -->

                    </el-table-column>
                </el-table>


            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 放分页 -->
                <el-pagination background :current-page="pageNum" :page-size="pageSize" @next-click="nextPage"
                    @prev-click="prePage" @current-change="currentPage" @size-change="sizeChange"
                    layout="prev, pager, next,total,sizes" :total="total" :page-sizes="[5, 10, 15, 20]">
                </el-pagination>
            </el-col>
        </el-row>
    </div>

</template>

<script>
export default {
    data() {
        return {
            tableData: [],

            pageNum: 1,
            pageSize: 5,
            total: 0,
            dischargeForm: {
                name: "",
                deId: "",
                docId: "",
                oaStatus: "",
                beginDate: "",
                endDate: "",
                ptId: "3",

            },
            statusList: [
                { id: 0, name: '未缴费' },
                //{ id: 1, name: '待确定' },
                { id: 2, name: '已完成' },
                { id: 3, name: '已缴费' },

            ],
            deList: [
                {
                    id: "",
                    docName: "",
                    docList: [
                    ]
                }],
            form: {},
            selectedRowData: "",
            value1: false



        }
    },
    methods: {

        nextPage(val) {
            //用户点击下一页触发
            this.pageNum = val;
            this.queryList();
        },
        prePage(val) {
            //上一页
            this.pageNum = val;
            this.queryList();
        },
        currentPage(val) {
            //当前页
            this.pageNum = val;
            this.queryList();
        },
        sizeChange(val) {
            this.pageNum = 1
            this.pageSize = val;
            this.queryList();
        },
        queryList() {

            let pageparam = {}
            pageparam.pageNum = this.pageNum
            pageparam.pageSize = this.pageSize
            pageparam.param = this.dischargeForm

            this.$axios.post("api/dischargeform/querylist", pageparam)
                .then(res => {
                    if (res.data.code == 200) {
                        this.pageNum = res.data.data.pageNum
                        this.pageSize = res.data.data.pageSize
                        this.total = res.data.data.total
                        this.tableData = res.data.data.list

                    }

                })
        },
        queryDe() {
            this.$axios.get("api/form/queryde")
                .then(res => {
                    if (res.data.code == 200) {
                        this.deList = res.data.data

                    }
                })
        },
        updateDocList() {
            const selectedDe = this.deList.find(department => department.id === this.dischargeForm.deId);
            this.docList = selectedDe ? selectedDe.docList : [];
        },
        updateHzdate(val) {
            console.log(val)
            this.$axios.post("api/dischargeform/updatehzdate", val)
                .then(res => {
                    if (res.data.code == 200) {
                        this.queryList()
                    }

                })
        },
        queryNurse() {
            this.$axios.get("api/nurse/querynurse")
                .then(res => {
                    if (res.data.code == 200) {
                        this.nurse = res.data.data
                    }
                })
        },
        handleSwitchChange(newValue) {
            // newValue 是开关的新值，true 表示是医生的病人，false 表示不是医生的病人
            console.log('Switch value changed:', newValue);
            // 在这里执行相应的逻辑，例如发送请求更新数据等
            if (newValue) {
                this.dischargeForm.deId = this.nurse.nurDeId
                this.queryList()
            } else {
                this.dischargeForm.deId = ''
                this.queryList()
            }

        },


    },
    created() {
        this.queryList()
        this.queryDe()
        this.queryNurse()


    },
    computed: {
        filteredTableData() {
            // 使用数组的 filter 方法来过滤数据，只保留状态为"未缴费"和"已缴费"的数据
            return this.tableData.filter(item => item.oaStatus === '0' || item.oaStatus === '1' || item.oaStatus === '2');
        }
    }

}
</script>

<style scoped></style>